<template>
	<view>
		<view class="printer-cells">
			<view class="printer-cell">
				<view class="printer-cell__hd">
					<view class="printer-cell__title">
						内科
					</view>
					<view class="edit-btn">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="printer-cell__bd">
					<view class="printer-icon">
						<image src="../../static/images/printer.png" mode=""></image>
					</view>
					<view class="flex_bd">
						<view class="printer-info clearfix">
							<view class="item item-md">
								打印机： VSHBBS串号
							</view>
							<view class="item item-sm">
								分区： A区
							</view>
							<view class="item">
								状态： 链接
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="printer-cell">
				<view class="printer-cell__hd">
					<view class="printer-cell__title">
						内科
					</view>
					<view class="edit-btn">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="printer-cell__bd">
					<view class="printer-icon">
						<image src="../../static/images/printer.png" mode=""></image>
					</view>
					<view class="flex_bd">
						<view class="printer-info clearfix">
							<view class="item item-md">
								打印机： VSHBBS串号
							</view>
							<view class="item item-sm">
								分区： A区
							</view>
							<view class="item">
								状态： 链接
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="printer-cell">
				<view class="printer-cell__hd">
					<view class="printer-cell__title">
						内科
					</view>
					<view class="edit-btn">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="printer-cell__bd">
					<view class="printer-icon">
						<image src="../../static/images/printer.png" mode=""></image>
					</view>
					<view class="flex_bd">
						<view class="printer-info clearfix">
							<view class="item item-md">
								打印机： VSHBBS串号
							</view>
							<view class="item item-sm">
								分区： A区
							</view>
							<view class="item">
								状态： 链接
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="printer-cell">
				<view class="printer-cell__hd">
					<view class="printer-cell__title">
						内科
					</view>
					<view class="edit-btn">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="printer-cell__bd">
					<view class="printer-icon">
						<image src="../../static/images/printer.png" mode=""></image>
					</view>
					<view class="flex_bd">
						<view class="printer-info clearfix">
							<view class="item item-md">
								打印机： VSHBBS串号
							</view>
							<view class="item item-sm">
								分区： A区
							</view>
							<view class="item">
								状态： 链接
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="printer-cell">
				<view class="printer-cell__hd">
					<view class="printer-cell__title">
						内科
					</view>
					<view class="edit-btn">
						<text class="iconfont icon-edit"></text>
					</view>
				</view>
				<view class="printer-cell__bd">
					<view class="printer-icon">
						<image src="../../static/images/printer.png" mode=""></image>
					</view>
					<view class="flex_bd">
						<view class="printer-info clearfix">
							<view class="item item-md">
								打印机： VSHBBS串号
							</view>
							<view class="item item-sm">
								分区： A区
							</view>
							<view class="item">
								状态： 链接
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="printer-foot">
				<button type="default" class="btn" @click="show = true">打印</button>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="560rpx" border-radius="30" :closeable="true">
			<view class="print-popup">
				<view class="print-popup__hd">
					<view class="popup-title">
						病人信息
					</view>
				</view>
				<view class="print-popup__bd">
					<view class="popup-infos">
						<view class="popup-info">
							<view class="item">
								姓名：<text>旷岩状</text>
							</view>
							<view class="item">
								床号：<text>157床</text>
							</view>
						</view>
						<view class="popup-info">
							<view class="item">
								导管：<text>1号</text>
							</view>
						</view>
					</view>
					<view class="print-preview">
						打印预览
					</view>
					<view class="print-border">
						<view class="print-name">PICC</view>
						<view class="print-num">薛启昭001</view>
						<view class="print-time">2000年06月07日 12:12:12</view>
						<view class="print-ma">
							<image src="../../static/images/print-ma.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="print-popup__ft">
					<button type="default" class="confirm-btn" @click="confirm">确定</button>
				</view>
			</view>
			<!-- <view class="print-closeable">
				<button type="default" class="close-btn" @click="close">
					<u-icon name="close" color="#fff" size="30"></u-icon>
				</button>
			</view> -->
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
			}
		},
		onLoad() {

		},
		methods: {
			confirm() {
				this.show = false
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.printer-cells {
		padding: 20rpx 30rpx;

		.printer-cell {
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			position: relative;
			margin-bottom: 20rpx;

			.printer-cell__hd {
				padding: 14rpx 20rpx;
				display: flex;
				border-bottom: 1rpx solid #e5e5e5;
				align-items: center;

				.printer-cell__title {
					font-size: 34rpx;
					line-height: 42rpx;
					color: #373b4f;
					margin-right: 20rpx;
				}

				.edit-btn .iconfont {
					color: #248ee8;
					font-size: 30rpx;
				}
			}

			.printer-cell__bd {
				display: flex;
				padding: 32rpx 20rpx;

				.printer-icon {
					width: 92rpx;
					padding-top: 16rpx;
					margin-right: 30rpx;

					image {
						width: 92rpx;
						height: 88rpx;
					}
				}

				.printer-info {
					font-size: 28rpx;
					color: #666666;
					line-height: 60rpx;

					.item {
						float: left;
						width: 50%;
						white-space: nowrap;
					}

					.item-md {
						width: 65%;
					}

					.item-sm {
						width: 35%;
					}
				}
			}
		}
	}

	.printer-foot {
		padding: 60rpx 45rpx;

		.btn {
			display: block;
			height: 80rpx;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			line-height: 80rpx;
			background-color: #248ee8;
			color: #fff;
			box-shadow: 4rpx 5rpx 10rpx rgba(0, 18, 152, 0.15);
		}

		.btn::after {
			border: 1px solid #248ee8;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.print-preview {
		font-size: 36rpx;
		color: #333333;
		line-height: 52rpx;
		margin-bottom: 10rpx;
	}

	.print-border {
		border: 1rpx dashed #999;
		padding: 20rpx;
		position: relative;
		border-radius: 16rpx;
		box-sizing: border-box;
		line-height: 1;
	}

	.print-name {
		font-size: 34rpx;
		color: #333333;
		margin-bottom: 28rpx;
	}

	.print-num {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 18rpx;
	}

	.print-time {
		font-size: 26rpx;
		color: #333333;
	}

	.print-ma {
		width: 86rpx;
		height: 82rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.print-ma image {
		width: 100%;
		height: 100%;
	}

	.popup-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-info .item {
		font-size: 30rpx;
		color: #333333;
		line-height: 60rpx;
	}

	.popup-info .item text {
		color: #666666;
	}

	.print-popup {
		padding: 50rpx 30rpx 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.popup-infos {
		margin-bottom: 20rpx;
	}

	.print-popup__ft {
		padding-top: 30rpx;

		.confirm-btn {
			display: block;
			height: 60rpx;
			font-size: 34rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
			background-color: #248ee8;
			color: #fff;
		}

		.confirm-btn::after {
			display: none;
		}

	}

	.print-closeable {
		padding-top: 30rpx;
		// background-color: rgba(0, 0, 0, 0.6)
	}

	.print-closeable .close-btn {
		width: 62rpx;
		height: 62rpx;
		line-height: 62rpx;
		padding: 0;
		border-radius: 100%;
		margin-bottom: -100rpx;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.print-closeable .close-btn::after {
		display: none;
	}
</style>

